<!--
 * @Descripttion:人员报表
 * @version:
 * @Author: ada.wu
 * @Date:2024-03-11 11:26:44
 * @LastEditors: ada.wu
 * @LastEditTime: 2024-04-09 18:56:39
-->
<template>
  <div class="bg-white" style="position: relative;">
    <div class="t-c p-tb">
      <img src="/@/assets/report/employee.svg">
    </div>
    <img src="/@/assets/report/employee-tag.svg" style="position: absolute;right: 6px;top:6px;">
    <div class="p-b p-lr-xs">
      <van-search v-model="queryParam.evaluatedName" shape="round" show-action placeholder="输入人员名称" @search="onSearch">
        <template #label>
          <van-icon style="font-size:18px" name="calendar-o" @click="dateShow=true" />
        </template>
        <template #action>
          <div @click="downCallback" class="text-black t-lg">搜索</div>
        </template>
      </van-search>
    </div>
    <van-empty v-if="listData.length==0&&!isQuery" description="暂无查询结果…" :image="getAssets('empty.svg')" />
    <van-cell-group style="min-height: 200px;" v-show="listData.length">
      <van-skeleton v-if="isQuery" title :row="6" />
      <van-cell v-for="(item,index) in listData" :key="index" :title="item.evaluatedName" is-link @click="goDetail(item)">
      </van-cell>
    </van-cell-group>
    <van-divider class="p-b" v-if="totalPages==1">没有更多了</van-divider>
    <van-pagination v-if="totalPages>1" @change="pageChange" v-model="queryParam.pageNumber" :items-per-page="queryParam.pageSize" :total-items="totalElements" :show-page-size="3" force-ellipses />
    <van-calendar v-model:show="dateShow" :min-date="minDate" :value="date" type="range" @confirm="onConfirm" color="#ffd100" :max-range='365' :range-prompt="'最多选择365天'" :allow-same-day="true" :default-date="defaultDate" />

  </div>
</template>
<script lang="ts">
import { Search, PullRefresh, Divider, Calendar, Pagination } from "vant";
//util
import { onMounted, reactive, toRefs, ref, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";
import { PageEnum } from "/@/enums/pageEnum";
import { getNewObj } from "/@/util";
import { formatToDate, getNewDate } from "/@/util/dateUtil";
import moment from "moment";
// 获取当前日期
const currentDate = moment();
// 计算最近三十天的日期
const thirtyDaysAgo = currentDate.subtract(30, "days");

const startTime = thirtyDaysAgo.format("YYYY-MM-DD") + " 00:00:00";
const endTime = moment().format("YYYY-MM-DD") + " 23:59:59";

//api
import { reportPersonList } from "/@/api/ExamApi";
export default {
  name: "Employee",
  components: {
    [Search.name]: Search,
    [Calendar.name]: Calendar,
    [Divider.name]: Divider,
    [PullRefresh.name]: PullRefresh,
    [Pagination.name]: Pagination,
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    let { valuatorUserId = "" } = route.query;
// startTime": "", //开始时间
// "endTime": "" //结束时间

    const state = reactive({
      minDate: new Date(2000, 0, 1),
      defaultDate: [getNewDate(startTime), getNewDate(endTime)],
      dateShow: false,
      date: [],
      queryParam: {
        // "activityId": "6", //活动ID
        valuatorUserId, //评价者userId
        evaluatedName: "", //被评价者名称，左like
        startTime,
        endTime,
        status: "", //状态:1-已评价，2-未评价
        pageNumber: 1, //当前页
        pageSize: 10, //分页大小
      },
      totalPages: 0, //总页数
      totalElements: 0, //总数量
      listData: <any>[],
      isQuery: false,
    });
    onMounted(() => {
      nextTick(() => {
        downCallback();
      });
    });

    const downCallback = () => {
      resetList();
      queryList();
    };

    const queryList = () => {
      state.isQuery = true;
      let { queryParam } = getNewObj(state);
      reportPersonList({
        ...queryParam,
      })
        .then((res: any) => {
          if (res) {
            // state.listData = [...state.listData, ...res.list];
            state.listData = res.list || [];
            state.totalElements = res.totalElements;
            state.totalPages = Math.ceil(
              res.totalElements / state.queryParam.pageSize
            );
          } else {
            state.listData = [];
          }
        })
        .catch(() => {})
        .finally(() => {
          state.isQuery = false;
        });
    };

    const resetList = () => {
      state.isQuery = false;
      state.queryParam.pageNumber = 1;
      state.listData = [];
    };

    const goDetail = (item: any) => {
      console.log(item);
      router.push({
        // path: PageEnum.REPORT_EMPLOYEE_LIST,
        path: PageEnum.REPORT_EMPLOYEE_DETAIL,
        query: {
          ...item,
          valuatorUserId,
        },
      });
    };

    const onSearch = (val: any) => {
      downCallback();
    };
    const onClickButton = () => {
      downCallback();
    };
    const onConfirm = (value: any) => {
      state.dateShow = false;
      if (value && value.length) {
        state.queryParam.startTime = formatToDate(value[0]) + " 00:00:00";
        state.queryParam.endTime = formatToDate(value[1]) + " 00:59:59";
        downCallback();
      }
    };
    const pageChange = (value: any) => {
      state.queryParam.pageNumber = value;
      state.listData = [];
      queryList();
    };

    return {
      ...toRefs(state),
      goDetail,
      downCallback,
      onSearch,
      onClickButton,
      onConfirm,
      pageChange,
    };
  },
};
</script>

<style lang="scss" scoped>
::v-deep(.van-cell) {
  align-items: center;
}

::v-deep(.van-hairline--top-bottom:after) {
  border-width: 0 0 0 0;
  right: -42%;
  left: -42%;
}
</style>
